// src/components/MyComponent.vue

<template>
  <div>
    <ul>
      <li v-for="(item, index) in myStore.dataList.result" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useStore } from '../stores/counter'
import { onMounted } from 'vue'
import axios from 'axios' // 请确保你已经安装了 axios


const myStore = useStore()

// 定义触发操作的方法，在组件挂载后执行
const fetchData = async () => {
  try {
    // 发起请求
    const response = await axios.get('http://localhost:8000/pet/pets')

    // 更新数据到 Pinia Store
    myStore.updateDataList(response.data)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

// 在组件挂载后执行 fetchData 方法
onMounted(() => {
  fetchData()
})



</script>
